{extend name="normal_base" /}
{block name="navigation"}{/block}
{block name="css"}
<style>
    .my-download {
        position: relative;
        padding: 30px;
        border: 1px dashed #e2e2e2;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
        color: #999;
        display: inline-block;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .title {
        color: #FF5722;
        font-weight: bold;
    }

</style>
{/block}
{block name="body"}
<div class="x-body">
    <blockquote class="layui-elem-quote" style="color: #AAAAAA"><span class="title">步骤一：</span>下载模板文件,并放入数据，客户编号会自动按序生成；填写的省市区信息若不能被正确匹配，会默认为：未指定。注意：一次放入数据不要过多，建议不超过 500 条</blockquote>
    <div class="my-download" id="my-download-id">
        <i class="fa fa-cloud-download" aria-hidden="true" style="color: #009688; font-size: 45px;"></i>
        <p>点击下载，客户清单批量导入模板</p>
    </div>

    <!--<blockquote class="layui-elem-quote" style="color: #AAAAAA"><span class="title">步骤二：</span>选择导入的客户的：所属合同签订公司</blockquote>
    <div class="layui-form-item">
        <form class="layui-form">
        <div class="layui-input-inline" id="select-sign-company-div" style="width: 274px">
            <select name="sign_company_code" id="sign_company_code" lay-filter="sign_company_code">
            </select>
        </div>
        </form>
    </div>-->

    <br>
    <br>

    <blockquote class="layui-elem-quote" style="color: #AAAAAA"><span class="title">步骤二：</span>上传清单文件，等待结果回显。注意：仅能上传指定（.xlsx | .xls）格式文件，且单次上传文件最大不能超过：120k</blockquote>
    <div class="layui-upload-drag" id="layui-upload-drag-id">
        <i class="layui-icon layui-icon-upload-circle"></i>
        <p>点击上传，或将文件拖拽到此处&nbsp;&nbsp;&nbsp;</p>
    </div>

    <br>
    <br>

    <blockquote class="layui-elem-quote" style="color: #AAAAAA"><span class="title">结果回显：</span></blockquote>

    <div style="display: none" class="layui-anim layui-anim-upbit" id="show_res_div">

        <table class="layui-table">
            <caption class="table_name">结果总览</caption>
            <thead>
            <tr>
                <th>上传成功时间</th>
                <th>总记录数量</th>
                <th>处理成功数量</th>
            </tr>
            </thead>
            <tbody id="show_res_count"></tbody>
        </table>

        <table class="layui-table">
            <caption class="table_name">失败明细</caption>
            <thead>
            <tr>
                <th>对应EXCEL行号</th>
                <th>失败原因</th>
            </tr>
            </thead>
            <tbody id="show_res"></tbody>
        </table>
    </div>
</div>
{/block}

{block name="script"}
<script>

    layui.use(['upload', 'table'], function() {
        var $ = layui.jquery
                , upload = layui.upload;
        var table = layui.table;
        var sign_company_code = $('#sign_company_code').val();

        upload.render({
            elem: '#layui-upload-drag-id'
            ,url: '{:url("admin/customer/import_customers")}'
            ,data:{
                t:{$t},
                token:"{$token}",
                sign_company_code:sign_company_code
            }
            ,accept: 'file' //普通文件
            ,acceptMime: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' //打开文件选择框时，筛选出的文件类型
            ,exts: 'xlsx|xls' //只允许上传excel表格
            ,size: 120 //限制文件大小，单位 KB
            ,auto: true //选择完文件后，是否自动上传
            ,field:'file[]'//上传时的文件字段
            ,drag:true//是否接受拖拽的文件上传
            ,choose: function(obj){
                //在文件被选择后触发
            }
            ,before: function(obj) {
                //选择文件后，上传成功/失败 前
                layer.load(); //上传loading
            }
            ,done: function(data){
                layer.closeAll('loading');
                //完成上传且成功
                if (data.code == 1) {
                    layer.msg(data.msg,{icon:5,time:1500});
                } else {
                    //上传成功制造动态表格回显结果
                    //1、放入统计
                    var $trTemp_count;
                    $trTemp_count = $("<tr></tr>");
                    $trTemp_count.append("<td>"+ data.msg.upload_complete_time +"</td>");
                    $trTemp_count.append("<td>"+ data.msg.total_counts +"</td>");
                    $trTemp_count.append("<td>"+ data.msg.success_counts +"</td>");
                    $trTemp_count.appendTo("#show_res_count");

                    //2、放入失败明细
                    window.console.log(data.msg.failed_customer_list);
                    var tr,$trTemp;
                    var failed_arr =  data.msg.failed_customer_list;
                    $(failed_arr).each(function(){
                        //window.console.log(this.row+" "+this.reason);
                        $trTemp = $("<tr></tr>");
                        //往行里面追加 td单元格
                        $trTemp.append("<td>"+ this.row +"</td>");
                        $trTemp.append("<td>"+ this.reason +"</td>");
                        // $("#J_TbData").append($trTemp);
                        $trTemp.appendTo("#show_res");
                    });
                    /*加入以空行，区分同一个页面多次上传*/
                    $("<tr><td colspan='2'>&nbsp;</td></tr>").appendTo("#show_res");
                    $('#show_res_div').show();
                }
            }
            ,error: function(){
                //演示失败状态，可以实现重传
                layer.closeAll('loading');
                lay.msg('上传失败', {icon:5,time:1500})
            }
        });
    });

    $('#my-download-id').bind('click', function () {
        var $eleForm = $("<form method='get'></form>");
        $eleForm.attr("action","__PUBLIC__/excel_template/customer-list-template.xlsx");
        $(document.body).append($eleForm);
        //提交表单，实现下载
        $eleForm.submit();
    })
</script>
{/block}